<script setup>
import { eventsCreateRedisService } from '@/api/events'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()


// 创建事件
const form = ref()

const formModel = ref({
  name: '',
  host: '',
  port: '',
  password: ''
})

const rules = {
  name: [
    { required: true, message: '标识符不能为空', trigger: 'submit' }
  ],
  host: [
    { required: true, message: '主机不能为空', trigger: 'submit' }
  ],
  port: [
    { required: true, message: '端口不能为空', trigger: 'submit' },
    {
      validator: (rule, value, callback) => {
       if (!Number.isInteger(Number(value))) {
        callback(new Error('端口不合法'))
       } else {
        callback()
       }
      },
      trigger: 'submit'
    }
  ]
}

const createEvent = async () => {
  await form.value.validate()
  await eventsCreateRedisService(formModel.value)
  router.push('/events')
}

</script>

<template>
  <el-container>
    <el-header style="display: flex; align-items: center; border: 1px solid rgb(229, 229, 229);">
      <el-icon size="50" style="margin-right: 10px">
        <svg t="1733219920361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5104" width="200" height="200"><path d="M537.6 379.392h-2.368a89.6 89.6 0 1 1 78.784-46.912l82.944 138.304c12.544-2.24 25.6-3.584 39.04-3.584 123.648 0 224 100.352 224 224a224.128 224.128 0 0 1-363.392 175.232l65.024-63.168c21.504 14.336 47.04 22.4 74.368 22.4a134.784 134.784 0 0 0 134.4-134.4 134.784 134.784 0 0 0-134.4-134.4V556.8a134.4 134.4 0 0 0-77.12 24.192L537.6 379.392z m259.712 377.408a89.6 89.6 0 0 1-142.208-20.736H507.52A224 224 0 1 1 243.136 471.68v92.8a135.04 135.04 0 0 0-89.6 126.72 134.784 134.784 0 0 0 134.4 134.4A134.784 134.784 0 0 0 422.4 691.2v-44.8h235.328a89.728 89.728 0 0 1 139.584-16.32 89.6 89.6 0 0 1 0 126.72z" fill="#4C4C4C" p-id="5105"></path><path d="M629.248 193.088A134.848 134.848 0 0 0 534.4 153.6a134.848 134.848 0 0 0-134.4 134.4 134.528 134.528 0 0 0 103.552 130.816l-137.6 229.184a89.6 89.6 0 1 1-78.72-44.16l92.608-153.664A224.128 224.128 0 0 1 534.336 64c123.648 0 224 100.352 224 224h-89.6a134.784 134.784 0 0 0-39.488-94.912z" fill="#C63B66" p-id="5106"></path></svg>
      </el-icon>
      <strong>WebHook</strong>
    </el-header>
    <el-main style="border: 1px solid rgb(229, 229, 229);">
      <el-form ref="form" :model="formModel" :rules="rules" label-width="auto" label-position="left" require-asterisk-position="right">
        <el-form-item prop="name" label="标识符">
          <el-input v-model="formModel.name"></el-input>
        </el-form-item>
        <el-form-item prop="host" label="主机">
          <el-input v-model="formModel.host"></el-input>
        </el-form-item>
        <el-form-item prop="port" label="端口">
          <el-input v-model="formModel.port"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="formModel.password" input-style="background-color:whitesmoke"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: flex-end; width: 100%;">
            <el-button @click="createEvent" color="black" style="padding: 20px;">
              创建WebHook事件
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>